<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2024-05-12 10:08:08
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2024-05-12 19:04:50
 * @FilePath: /gptfront-dev/src/components/ConversationGroup/ConversationGroup.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <scroll-view
    class="chat-scroll-view h-full "
    scroll-y
    :scroll-top="scrollTop"
    upper-threshold="300"
    @scrolltolower="scrollTopAction"
  >
    <view
      class="scroll-view-content min-h-full gap-3 px-3 conversation-container"
      data-test="Hello world"
      :style="{
        scrollPaddingTop: `${(safeAreaInsets?.bottom ?? 0) + 12}px`,
      }"
    >
      <view
        v-if="isGenerating || isGeneratingImage"
        class="[transform:rotateX(180deg)]"
      >
        <view class="flex items-center">
          <view class="size-5 rounded-full bg-purple-600"></view>
          <view class="ml-2 text-xs">CHATGPT</view>
        </view>
        <view class="mt-1 pl-7">
          <view v-if="isGeneratingImage" class="text-sm text-zinc-500">
            {{ t('imageGenerating') }}
          </view>
          <view
            v-else
            class="break-word"
            v-html="md.render(`${generatingMessage}●`)"
          ></view>
        </view>
      </view>


      <Conversation
        v-for="([question, ...others], idx) in conversations.values()"
        :key="idx"
        :question="question"
        :conversations="others"
        :data-max="others.length"
        class="conversation"
        @send-message="handleSendMessage"
      ></Conversation>


      <view
        v-if="isFetchingNextPage"
        class="flex justify-center py-1 text-sm text-zinc-600"
      >
        {{ t('loading') }}
      </view>
    </view>
  </scroll-view>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useScroll, useConversations } from './conversationGroup.hooks'
import Conversation from './Conversation.vue'
import { md } from '@/utils/markdown'

export default defineComponent({
  name: 'ConversationGroup',
  components: {
    Conversation,
  },
  setup(_, { emit }) {
    const {
      scrollTop,
      hasNextPage,
      currentRoomId,
      isFetchingNextPage,
      scrollTopAction,
    } = useScroll()

    const { conversations } = useConversations()

    function handleSendMessage(message) {
      console.log('message', message);
      emit('sendMessage', message)
    }

    

    return {
      scrollTop,
      hasNextPage,
      currentRoomId,
      isFetchingNextPage,
      scrollTopAction,
      conversations,
      md,
      handleSendMessage
    }
  },
})
</script>

<style lang="scss" scoped>


.conversation-container {
  max-width: 712px;
  margin: 0 auto;
  width: 100%;
}

</style>
